<template>
    <el-dialog title="设置费率" :visible.sync="dialogForm" width="1100px">
        <el-table :data="list" v-loading="listLoading" border stripe max-height="500" class="mt-10">
            <el-table-column type="index" label="序号" fixed="left"  width="55"></el-table-column>
            <el-table-column v-for="(item,index) in factor" :key="index" :prop="item.code" :label="item.name" 
                             min-width="220">
                <template slot-scope="scope">
                    <div style="display: flex">
                        <el-select v-model="list[scope.$index].factor[index].operator"
                                   @change="v=>handelAttrOperator(item,index,scope.$index,v)"
                                   style="width: 120px;margin-right: 10px"
                                   placeholder="请选择" clearable>
                            <el-option v-for="[key, val] in _dictRuleOperatorType" :key="key" :label="val" :value="key">
                            </el-option>
                        </el-select>
                        <el-select v-if="item.ruleDataType!=='TEXT'" v-model="list[scope.$index].factor[index].typeValue"
                                   @change="v=>handelAttr(item,index,scope.$index,v)"
                                   @focus="getTypeValue(item)" style="width: 120px"
                                   placeholder="请选择" clearable>
                            <el-option v-for="set in item.typeValue" :key="set.code" :label="set.name"
                                       :value="set.code">
                            </el-option>
                        </el-select>
                        <el-input style="min-width: 80px;max-width: 188px" v-if="item.ruleDataType==='TEXT'" v-model="list[scope.$index].factor[index].typeValue"></el-input>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="rate" label="费率"  min-width="120">
                <template slot-scope="scope">
                    <el-input v-model="scope.row.rate"></el-input>
                </template>
            </el-table-column>
            <el-table-column fixed="right" align="center" label="操作"  width="140">
                <template slot-scope="scope">
                    <el-button v-if="scope.$index===list.length-1"
                               @click="handleToPush"
                               type="text" icon="el-icon-plus" size="medium"></el-button>
                    <el-button v-if="scope.$index!==list.length&&list.length>1"
                               @click="list.splice(scope.$index,1)"
                               type="text" icon="el-icon-close" style="color: red" size="medium"></el-button>
                </template>
            </el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogForm = false">取 消</el-button>
            <el-button type="primary" @click="handleSubmit"
                       :loading="$store.getters.loadingBtn">
                确 定
            </el-button>
        </div>
    </el-dialog>
</template>

<script>
    import { getRuleIdRate, getRuleCodeValue, setRuleIdRate } from "@/api/balance/balance";

    export default {
        name: "rateForm",
        data() {
            return {
                dialogForm: false,
                listLoading: false,
                list: [],
                factor: [],
                factors: [],
                id: '',
            }
        },
        methods: {
            loadData(id) {
                this.id = id
                getRuleIdRate(id).then(res => {
                    this.list = res.data.aaData
                    this.factor = JSON.parse(JSON.stringify(res.data.aaData[0].factor))
                    let factors = JSON.parse(JSON.stringify(res.data.aaData[0].factor))
                    let arr = []
                    for (let i = 0; i < factors.length; i++) {
                        const el=factors[i]
                        arr.push({
                            code: el.code,
                            name: el.name,
                            operator: el.operator,
                            typeValue: '',
                        })
                    }
                    this.factors = arr
                    this.getTypeValueFor(0)
                })
            },
            getTypeValueFor(val) {
                if(val<this.factor.length){
                    const el=this.factor[val]
                    const params = {
                        search_EQ_code: el.code
                    }
                    if(el.ruleDataType!=='TEXT'){
                        getRuleCodeValue(params).then(res => {
                            el.typeValue = res.data.aaData
                            this.getTypeValueFor(val+1)
                        })
                    }else{
                        this.getTypeValueFor(val+1)
                    }
                }

            },
            handelAttr(item, i, index, v, name = '') {
                console.log(item, i, index, v)
                let params = {
                    ...this.list[index].factor[i],
                    typeValue: v,
                }
                this.list[index].factor.splice(i, 1, params)
            },
            handelAttrOperator(item, i, index, v, name = '') {
                console.log(item, i, index, v)
                let params = {
                    ...this.list[index].factor[i],
                    operator: v,
                }
                this.list[index].factor.splice(i, 1, params)
            },
            handleToPush() {
                console.log(this.factors)
                this.list.push({
                    factor: [...JSON.parse(JSON.stringify(this.factors))],
                    rate: '',
                })
            },
            handleSubmit() {
                setRuleIdRate(this.id, this.list).then(res => {
                    this.$message({ message: '设置费率成功!', type: 'success' })
                    this.dialogForm = false
                })
            },
            getTypeValue(item) {
                const params = {
                    search_EQ_code: item.code
                }
                getRuleCodeValue(params).then(res => {
                    item.typeValue = res.data.aaData
                })
            }
        },
        watch: {
            dialogForm(bool) {
                if (!bool) {
                    this.$parent.rateForm = false
                    this.$emit('load')
                }
            }
        }
    }
</script>

<style scoped>

</style>
